<template>
  <div class="info_main mt-5 ml-5">
    <!--    搜素框  -->
    <div class="row" >
      <div class="col-md-10">
        <el-input  type="text"
                   v-model="findName"
                   style="width: 500px;"
                   placeholder="请输入帖子标题..."
                   clearable
                   @keyup.enter.native="searchByTitle">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchByTitle()" class="ml-3" plain>搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="clearFindInput()" class="ml-3">重置</el-button>
      </div>
      <!--      添加按钮-->
      <!--      <div class="col-md-4" align="right">-->
      <!--        <el-button type="primary" @click="addOpen()" plain><i class="el-icon-plus" ></i>添加</el-button>-->
      <!--      </div>-->
    </div>
    <div class="row mt-2 ml-1">
      <el-button @click="toggleSelection()">取消选择</el-button>
      <el-button type="danger" @click="handleMultipleDelete">批量删除</el-button>
    </div>
    <div class="show_data mt-4">
      <el-table
          ref="multipleTable"
          v-horizontal-scroll="'always'"
          show-overflow-tooltip
          :data="showData"
          style="width: 100%"
          :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'17px'}"
          :header-cell-style="{background:'whitesmoke', fontFamily:'Helvetica',fontSize:'20px'}"
          height="700"
          @selection-change="handleSelectionChange"
          @filter-change="filterChange"
          :filter-method="filterHandler"
          tooltip-effect="dark"
          :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            fixed
            prop="post_comment_time"
            label="评论编辑时间"
            width="240">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.post_comment_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="post_title"
            label="帖子标题"
            width="200">
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="帖子标题：">
                <span>{{ props.row.post_title }}</span>
              </el-form-item>
              <el-form-item label="发帖人：">
                <span>{{ props.row.post_user_name }}</span>
              </el-form-item>
              <el-form-item label="帖子编辑时间：">
                <span>{{ props.row.post_time }}</span>
              </el-form-item>
              <el-form-item label="帖子类别：">
                <span v-if="props.row.post_category==1">求助问答</span>
                <span v-else-if="props.row.post_category==2">学长学姐说</span>
                <span v-else-if="props.row.post_category==3">日常生活</span>
                <span v-else-if="props.row.post_category==4">其他</span>
              </el-form-item>
              <el-form-item label="帖子标签：">
                <span>{{ props.row.post_label }}</span>
              </el-form-item>
              <el-form-item label="帖子内容：">
                <span>{{ props.row.post_content}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="comment_user_name"
            label="评论发布者"
            width="180">
        </el-table-column>
        <el-table-column
            prop="post_comment_content"
            label="评论内容"
            width="250">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="warning"
                @click="edit(scope.$index, scope.row)">
              <span class="btnfontClass" >修改</span>
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">
              <span class="btnfontClass" >删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div class="pagin mt-5 mb-5">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="idleContainerPage"
            :page-size="idleContainerSize"
            layout="total, prev, pager, next"
            :total=total>
        </el-pagination>
      </div>



      <!--                  弹窗修改-->
      <el-dialog title="修 改 评 论" :visible.sync="dialogFormVisible"  >


        <el-form :model="CommentForm" ref="CommentForm" label-width="100px" class="CommentForm" status-icon>

          <el-form-item
              label="评论内容"
              prop="comment_content"
              :label-width="formLabelWidth">
            <el-input v-model="CommentForm.comment_content"
                      show-word-limit
                      type="textarea"
                      maxlength="200"
                      :rows="10"
                      autocomplete="off"
                      placeholder="请输入评论内容，1-200个字符"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitEditForm()">提 交</el-button>
            <el-button @click="resetEditForm()">重 置</el-button>
            <el-button @click="cancelEdit()">取 消</el-button>
          </el-form-item>

        </el-form>

      </el-dialog>


    </div>
  </div>
</template>

<script>
import {getAllPostComment,deletePostComment,updatePostComment} from '@/api/Discussion'
import {deleteIdleComment} from "@/api/Resale";

export default {
  name: "information_main",
  data() {
    return {
      //搜索相关功能
      findName:'',
      idleContainerPage:0, // 分页的数据：当前页数
      idleContainerSize:0, // 分页的数据：每页的数量
      total:0,
      IdleData: [],
      showData:[],
      copyData:[],
      search_info:[],
      multipleSelection: [],
    //修改评论弹窗
      dialogFormVisible:false,
      CommentForm:{
        comment_id: '',
        comment_content:'',

      },
      formLabelWidth:'120px',




    }
  },

  methods: {
    //修改评论
    edit(index, row){
      this.dialogFormVisible=true;
      this.CommentForm.comment_content=row.post_comment_content;
      this.CommentForm.comment_id=row.post_comment_id;
    },
    //连接后端修改
    submitEditForm(){
      if(this.CommentForm.comment_content.length==0) {
        this.$msg.error("输入框不能为空！");
        return false;
      }
      if(this.CommentForm.comment_content.length>200) {
        this.$msg.error("评论内容不能超过200字！");
        return false;
      }
      //再次确认
      this.$confirm('确认修改该评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateSave();
      }).catch(() => {
        this.$msg.error("修改失败！");
      });
    },
    //  修改评论
    updateSave(){
      updatePostComment({
        post_comment_id:this.CommentForm.comment_id,
        post_comment_content:this.CommentForm.comment_content,
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("修改该评论成功！");
        }else{
          this.$msg.error("修改该评论失败！");
        }
        this.dialogFormVisible=false;
        this.init();
      });
    },
    cancelEdit(){
      this.dialogFormVisible=false;
      this.CommentForm.comment_content="";
    },
    resetEditForm(){
      this.CommentForm.comment_content="";
    },
    //获取全部帖子评论信息
    init(){
      getAllPostComment({}).then(res=>{
        this.IdleData=res.data.data;
        this.copyData=res.data.data;
        this.getShowIdle();
      });
    },
    //删除
    handleDelete(index, row) {

      //再次确认
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteSave(row.post_comment_id)
      }).catch(() => {
        this.$msg.error("取消删除！");
      });

    },
    //连接后端，进行删除
    deleteSave(post_comment_id){
      deletePostComment({
        post_comment_id:post_comment_id
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success("删除成功！");
        }else{
          this.$msg.error("删除失败！");
        }
        this.init();
      })
    },
    //清空搜索框
    clearFindInput(){
      this.findName="";
      this.init();
    },
    handleCloseEdit(){
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["Editform"].resetFields();
      });
    },
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },
    //  批量删除
    handleMultipleDelete(rows){

      if (this.multipleSelection == '') {
        this.$message.error('您未选中任何评论，请重新操作！！！');
        return;
      }

      let checkArr = this.multipleSelection;  // multipleSelection存储了勾选到的数据
      let post_comment_ids = [];
      checkArr.forEach(function (item) {
        post_comment_ids.push(item.post_comment_id);

      });

      //再次确认
      this.$confirm('确认批量删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        deletePostComment({
          post_comment_id:post_comment_ids,
        }).then(res=>{
          if(res.data.code==1){
            this.$msg.success("批量删除成功！");
          }else{
            this.$msg.error("删除失败！");
          }
          this.init();
        });

      }).catch(() => {
        this.$msg.error("取消删除！");
      });


    },
    //分页
    getShowIdle(){

      this.idleContainerSize=parseInt(10);
      this.showData = this.IdleData.slice((this.idleContainerPage - 1) * this.idleContainerSize, this.idleContainerPage * this.idleContainerSize);
      this.total=parseInt(this.IdleData.length);

    },
    //根据帖子标题进行搜索
    searchByTitle(){

      var search=this.findName;
      if(search==""||search==null)
      {
        this.$msg.error('输入框不能为空！');
        this.init();
      }
      else {
        //执行本地过滤
        var search_list=this.copyData;
        this.search_info=[];  //装搜索结果的容器

        for(let i=0;i<search_list.length;i++)
        {
          if(search_list[i].post_title.indexOf(search)>=0)
          {
            this.search_info.push(search_list[i]);
          }
        }
        if(this.search_info.length==0)
        {
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        this.IdleData=this.search_info;
        //分页
        this.idleContainerPage=parseInt(1);
        this.getShowIdle();

        //清空搜索框
        this.findName="";
      }

    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.idleContainerPage= parseInt(val);
      this.getShowIdle();
    },
    // 筛选器
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    filterChange (value) {
      console.log(value)

    },



  },
  created() {

    let _this=this;

    _this.idleContainerPage=parseInt(1);

    _this.init();

    _this.$refs.table.doLayout();


  },
}
</script>

<style scoped>
.btnfontClass{
  font-size: 15px;
}
.el-pagination {
  text-align: center;
}
.typeClass{
  font-size: 14px;
}
/*表格展开功能样式*/
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 70%;
}
</style>
